<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-09-09 16:53:53
 * @LastEditors: voanit
 * @LastEditTime: 2022-09-09 17:23:43
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .rem {
      width: 1rem;
      height: 1rem;
      background-color: blue;
    }

    .em {
      font-size: 10em;
    }

    .vwh {
      width: 100vw;
      height: 100vh;
      background-color: red;
    }

    * {
      padding: 0;
      margin: 0;

    }
  </style>
</head>

<body>
  <div>
    <!-- <div class="em">
      em===【参照自身或者上一级的font-size】
    </div>
    <div class="rem">
      rem===【参照html的font-size】
    </div> -->
    <!-- 
    <div class="vwh">
      vw/vh ===【把视口的宽高分成100等分，然后占他的多少份】
    </div> -->
    <div class="rem">
      rem===【参照html的font-size】
    </div>
  </div>
  <script>

    //   em  rem  vw  vh   rpx：750等分[小程序]

    // rem实现的原理
    var width = document.documentElement.offsetWidth
    // console.log(width, 'width');
    var fontSize = width / 750 * 100
    document.documentElement.style.fontSize = fontSize + 'px'
    window.onresize = function () {
      /* 获取屏幕尺寸 */
      width = document.documentElement.offsetWidth
      // console.log(width, 'width');
      fontSize = width / 750 * 100
      console.log(fontSize);
      document.documentElement.style.fontSize = fontSize + 'px'

    }

  </script>
</body>

</html>